<template>
  <div class="page">
    <TitleBar title="表单" />
    <div class="box">
      <van-form :colon="true" @submit="onSubmit" :readonly="!isAdd" :disabled="!isAdd">
        <van-field v-model="addForm.mobile" type="tel" label="手机号" :required="true" placeholder="请输入手机号" :rules="[
          {
            required: true,
            message: '请输入',
          },
        ]" />
        <van-field v-model="addForm.message" rows="2" autosize label="留言" :required="true" type="textarea" maxlength="50"
          placeholder="请输入留言" show-word-limit :rules="[
            {
              required: true,
              message: '请输入',
            },
          ]" />
        <van-field :required="true" label="位置">
          <template #input>
            <van-radio-group v-model="addForm.position" direction="horizontal" :disabled="!isAdd" :rules="[
              {
                required: true,
                message: '请选择',
              },
            ]">
              <van-radio name="1">上单</van-radio>
              <van-radio name="2">打野</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field label="是否新增">
          <template #input>
            <van-switch v-model="isAdd" @change="switchChange" />
          </template>
        </van-field>
        <div style="margin: 16px" v-if="isAdd">
          <van-button :round="true" :block="true" type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="box">
      <van-divider>响应式</van-divider>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  onMounted,
  ref,
  reactive,
  onUpdated,
  onUnmounted,
  toRefs,
} from "vue";
import { showDialog } from 'vant';
const isAdd = ref(true);
//响应式
const addForm = reactive({
  mobile: "180",
  message: "xxx",
  position: "",
});
//复制对象
const addFormRefs = toRefs(addForm);
onMounted(() => {

});

onUpdated(() => {
  console.log("onUpdated");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
const onSubmit = (values: any) => {
  console.log("submit", values, addForm);
  addFormRefs.message.value = "苍茫的天涯是我的爱";
  showDialog({
    title: "温馨提示",
    message: "您确定要这样做吗?",
  })
    .then(() => { })
    .catch(() => { });
};
const switchChange = (value: boolean) => {
  if (value) {
    addForm.position = "1";
  } else {
    addForm.position = "2";
  }
};
</script>
<style lang="scss" scoped>
.page {
  width: 100vw;
  height: 100vh;
  background-color: #f6f9ff;

  .box {
    margin: 16px;
    border-radius: 6px;
    background-color: #ffffff;
  }
}
</style>